<template>
    <div class="home">
        <a-layout style="min-height: 100vh">
            <a-layout-sider width="380">
                <CreateSetting></CreateSetting>
            </a-layout-sider>
            <a-layout class="layout-right">
                <a-layout-header class="layout-header">
                    <a-space>
                        <a-button v-if="!appStore.isLogin" type="primary" @click="loginVisible = true">登录</a-button>
                        <a-tabs v-model:activeKey="activeKey" type="card">
                            <a-tab-pane key="1" tab="灵感广场"></a-tab-pane>
                            <a-tab-pane key="2" tab="任务"></a-tab-pane>
                        </a-tabs>
                    </a-space>
                </a-layout-header>
                <div class="list-container">
                    <List v-show="activeKey === '1'"></List>
                    <Task v-show="activeKey === '2'"></Task>
                </div>
            </a-layout>
        </a-layout>
        <Login v-model="loginVisible"></Login>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import List from "./components/list/index.vue";
import Task from "./components/task/index.vue";
import CreateSetting from "./components/create-setting/index.vue";
import Login from "./components/login/index.vue";
import { useAppStore } from "@/store";

const loginVisible = ref(false);
const appStore = useAppStore();
const activeKey = ref("1");
</script>
<style lang="less" scoped>
.home {
    display: flex;
    flex-direction: column;
    height: 100vh;
    .list-container {
        flex: 1;
        overflow: hidden;
    }
    .layout-right {
        background: #303841;
    }
    .layout-header {
        background: #303841;
        border-bottom: 1px solid #262626;
    }
    :deep(.ant-tabs) {
        .ant-tabs-tab-active {
            background: #1668dc;
            color: #fff;
            .ant-tabs-tab-btn {
                color: #fff;
            }
        }
    }
}
</style>
